<template>
  <ShowCard title="最近浏览">
    <div class="history">
      <div
        v-for="(cache, index) in cacheList"
        @click="() => toDetail(cache.id)"
        class="history-aunt"
        :key="index"
      >
        <image :src="cache.avatar" class="history-aunt-image" fit="fill" />
        <div class="history-aunt-title">
          {{ cache.name }}
        </div>
      </div>
    </div>
  </ShowCard>
</template>
<script lang="ts">
import { ref } from 'vue';
import Taro, { useDidShow } from '@tarojs/taro';
import { ShowCard } from '@/components';
import { getHistoryCache, ICommodityCache } from '@/utils/cache';
import './index.less';

export default {
  components: {
    ShowCard,
  },

  setup() {
    const cacheList = ref<ICommodityCache[]>([]);
    useDidShow(async () => {
      cacheList.value = await getHistoryCache();
    });
    const toDetail = (id) => {
      Taro.navigateTo({
        url: `/subpackages/commodity/index?id=${id}`,
      });
    };

    return {
      toDetail,
      cacheList,
    };
  },
};
</script>
